<template>
    <div class='active'>
        <swiper :modules="modules" :slides-per-view="1" :loop="true"
            :autoplay="{ delay: 4000, disableOnInteraction: false }" :pagination="{ clickable: true }" :space-between="30">
            <!--  @slideChange="(e) => onSlideChange(e, 'bigUp')" -->
            <swiper-slide v-if="active.timeData.value?.currTime > 0">
                <div>

                    <div class="top d-flex flex-column">
                        <div class="img"></div>
                        <div class="tle">{{ $t('message.active.a') }}</div>
                        <div class="label">{{ $t('message.active.b') }}</div>
                    </div>
                    <div class="btm d-flex flex-column">
                        <div class="tle">{{ $t('message.active.c') }}</div>
                        <div class="times">
                            <template v-if="!user.isLogin">
                                <VBtn style="scale: 0.8; font-size: 12px !important;" color="var(--main)"
                                    @click="openLoding">{{
                                        $t('message.ynologin.a') }}</VBtn>
                            </template>
                            <template v-else>
                                <span>{{ active.timeData.value?.d }}<div class="dd"> D</div></span>
                                <span>{{ active.timeData.value?.h }}<div class="dd"> H</div></span>
                                <span>{{ active.timeData.value?.m }}<div class="dd"> M</div></span>
                                <span>{{ active.timeData.value?.s }}<div class="dd"> S</div></span>
                            </template>
                        </div>
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide>
                <div>
                    <div id="wallet" class="wallet d-flex flex-column">
                        <img src="/src/assets/wallet_banner.png" alt="">
                        <div class="tle">{{  $t('message.active.web3')  }}</div>
                        <!-- <div class="share_box" v-show="!photo">
                            <img @click="onCamera" src="/src/assets/wallet_share.png" alt="">
                        </div> -->
                        <img src="@/assets/logo.png" v-show="photo"  class="logs" />
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script lang='ts' setup>
import { Notify } from '@/components/y-notify/script';
import { onMounted, ref, watch } from 'vue';
import { active } from './script/active';
import { useUser } from '@/stores/user';
import openLoding from '@/comm/openLoding';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
import { YShare } from "@/components/y-share/script";
import * as htmlToImage from 'html-to-image';
const modules = ref<any>([Autoplay, Pagination]);
const user = useUser()
const photo = ref(false);
watch(() => user.isLogin, (val) => {
    if (val) {
        active.init(calllfun);
    }
})
// 分享图片
const onCamera = () => {
    photo.value = true;
    const char: HTMLCanvasElement = document.querySelector("#wallet")!;
    const color = char.parentElement!.style.background;
    char.style.background = "#171A1F";
    // const canvas = await html2canvas(char);
    htmlToImage.toCanvas(char).then(function (canvas: any) {
        // document.body.appendChild(canvas);
        YShare.open(canvas, "Share or download chart image", "wallet");
        char.style.background = color;
    });

    setTimeout(() => {
        photo.value = false;
    }, 1200);
}
function calllfun() {
    // Notify.alert('限时活动已结束！');
}
onMounted(async () => {
    if (user.isLogin) {
        active.init(calllfun);
    }
})
</script>
<style lang='less' scoped>
.logs{
    position: absolute;
    right: 10px;
    top: 5px;
    width: 80px;
    height: 40px;
    object-fit: contain;
}
:deep(.swiper-pagination-bullet-active) {
    background-color: var(--main) !important;
}

:deep(.swiper-pagination) {
    text-align: right !important;
}

:deep(.swiper-pagination-bullet) {
    background-color: #495159;
}

.active {
    width: 243px;
    background: #171A1F;
    border-radius: calc(4 * 1px);
    margin-left: calc(var(--space) * 1);

    :deep(.v-btn__content) {
        overflow: hidden;
    }

    .wallet {
        position: relative;

        >img:nth-child(1) {
            width: 100%;
            margin-bottom: 14px;
        }

        .share_box {
            position: absolute;
            top: 10px;
            right: 5px;
            width: 30px;
            height: 30px;
            background: rgba(255,255,255,0.2);
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            >img {
                width: 16px;
                height: 16px;
            }

        }

        >div:nth-child(2) {
            font-size: 14px;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 20px;
            padding-bottom: 20px;
        }


        .label {
            height: 22px;
            background: #FCC235;
            border-radius: 11px;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 22px;
            width: fit-content;
            padding: 0 14px;
            margin-left: 16px;
            cursor: pointer;
        }

    }

    .top {
        width: 100%;
        max-width: 254px;
        min-width: 150px;

        .img {
            // background-color: blue;
            height: 153px;
            background: url("./image/action.svg") center no-repeat;
            background-size: 80% auto;
            -webkit-user-drag: none;
            position: relative;

        }


        .label {
            display: block;
            margin-inline: var(--px);
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #E4E4E4;
            line-height: 17px;
            margin-bottom: 20px;
        }
    }

    .btm {
        border-top: 1px dashed #343A41;
        padding-inline-start: 20px;

        .tle {
            // margin-top: 11px;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #E4E4E4;
            line-height: 17px;
            margin: 12px 0px 4px;
        }

        .times {
            height: auto;
            margin-top: 5px;
            color: var(--win) !important;
            padding-bottom: 8px;

            .dd {
                color: var(--win) !important;
            }

            span {
                display: inline-block;
                font-size: 16px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;

                &:not(:first-child) {
                    margin-left: 10px;
                }

                div {
                    margin-left: 2px;
                    display: inline-block;
                    align-self: flex-end;
                    height: 17px;
                    font-size: 12px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 17px;
                }
            }
        }
    }
}

:deep(.v-btn__content) {
    font-size: 12px;
}

.tle {
    font-size: 16px;

    // position: absolute;
    text-align: left;
    margin: 0 20px;
    // width: 100%;
    // bottom: 5%;
    // font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #EAECEF;
    line-height: 22px;

}
</style>